<!-- src/components/ToolList.vue -->
<template>
  <el-row :gutter="20">
    <el-col class="tool-col" :span="6" v-for="tool in tools" :key="tool.name">
      <ToolCard :tool="tool" />
    </el-col>
  </el-row>
</template>
  
  <script>
  import ToolCard from '@/components/ToolCard.vue';
  import { loadAlgorithms } from '@/utils/loadAlgorithms';
  
  export default {
    components: {
      ToolCard,
    },
    data() {
      return {
        tools: [],
      };
    },
    mounted() {
      const categories = loadAlgorithms();
      this.tools = categories.flatMap(category => category.tools);
    },
  };
  </script>
  
  <style scoped>
.tool-col {
  margin-bottom: 20px; /* 设置每个 el-col 的底部间隔 */
}
</style>